@extends('layouts.base')
@section('title', '广告图片列表管理')
@section('admin-style')
    <link rel="stylesheet" href="{{ asset('/assets/plugins/dropify/dist/css/dropify.min.css') }}">
@stop
@section('content')
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">广告图片列表-添加</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
                    <li class="breadcrumb-item">广告图片列表管理</li>
                    <li class="breadcrumb-item active">广告图片添加</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header bg-success">
                        <h4 class="m-b-0 text-white">添加广告图片</h4>
                    </div> 
                    <div class="card-body"></div>
                    <div class="card-body">
                        <form role="form">
                            @csrf
                            <div class="form-body">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">广告图片名称：</label>
                                    <div class="col-md-7">
                                        <input class="form-control form-white adverName" autocomplete="off" placeholder="输入广告图片名称" type="text" name="adver_name"> 
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-2" for="">广告图片图片：</label>
                                    <div class="col-md-3">
                                        <input class="form-control form-white adverImage" style="display: none;" type="file" onchange="upload()"  id="photoFile" name="adver_name">
                                        <img id="preview_photo" src="" width="250px" height="150px" style="display: none;" >
                                        <input type="hidden" value="" name="adverImage" id="adverImage">
                                        <a href="javascript:void(0)" onclick="uploadPhoto()" class="btn m-t-10 btn-info btn-block waves-effect waves-light"><i class="ti-plus"></i>点击选择图片</a>
                                    </div>
                                </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="offset-sm-3 col-md-9">
                                                <button type="button" class="btn btn-success waves-effect waves-light save-category" data-dismiss="modal">保存</button>
                                                <a href="{{ route('admin.adverimage.index') }}"><button type="button" class="btn btn-danger"><i class=" fas fa-times"></i> 取消</button></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
    <script>
        function uploadPhoto() {
            $(".adverImage").click();
        }
        function upload() {
            if ($("#photoFile").val() == '') {
                return;
            }
            var formData = new FormData();
            formData.append('adverImage', document.getElementById('photoFile').files[0]);
            $.ajax({
                url:"/admin/adverimage/upload",
                type:"post",
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (data.images) {

                        $("#preview_photo").attr("src",data.images);
                        $("#preview_photo").css('display','block')
                        $("#adverImage").val(data.images);
                    }
                },

            });
        }

        $(".save-category").click(function () {
            var adverName = $(".adverName").val();
            var adverImage = $("#adverImage").val();
            if(!adverName){
                alert('请输入广告图片名称！')
                return;
            }
            if(!adverImage){
                alert('请上传广告图片图片！')
                return;
            }
            
            var formData = new FormData();
            formData.append('adverName', adverName) 
            formData.append('adverImage', adverImage)
            $.ajax({
                type: 'post',
                url: '/admin/adverimage/store',
                data: formData,
                dataType: 'json',
                cache: false,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (!data.flag) {
                        alert(data.msg);
                        return;
                    }
                    alert(data.msg);
                    window.location.href='/admin/adverimage';
                },
            })

        })
    </script>
@stop
